<!--  -->
<template>
  <div>
    <el-upload
      ref="upload"
      class="upload-demo"
      action="https://dqxweb.oss-cn-beijing.aliyuncs.com"
      :before-remove="beforeRemove"
      :before-upload="ossPolicy"
      :on-remove="handleRemove"
      multiple
      :data="objData"
      :limit="6"
      :on-success="handleUploadSuccess"
      :on-exceed="handleExceed"
      :file-list="fileList"
       list-type="picture"
    >
      <el-button size="small" type="primary">点击上传</el-button>
      
    </el-upload>
  </div>
</template>

<script>
export default {
  name: "OssUploads",
  computed: {
    imgUrl() {
      return this.value;
    },
  },
  data() {
    return {
      fileList: [],
      objData: {
        OSSAccessKeyId: "",
        policy: "",
        Signature: "",
        host: "",
        dir: "",
        key: "",
      },
    };
  },
  methods: {
    emitInput(val) {
      this.$emit("input", val);
    },
    // 移除图片之前
    beforeRemove(file) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    handleRemove(file,fileList) {
      this.fileList = fileList
      this.emitInput(this.fileList);
    },
    // 定义超出限制时的行为
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 6 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
          files.length + fileList.length
        } 个文件`
      );
    },
    async ossPolicy(file) {
      // this.imguuid = uuidv4();
      // 在上传前进行服务器签名
      const { data: res } = await this.$http.get("/oss/policy");
      // console.log(res)
      this.objData.OSSAccessKeyId = res.data.accessid;
      this.objData.policy = res.data.policy;
      this.objData.Signature = res.data.signature;
      this.objData.host = res.data.host;
      this.objData.dir = res.data.dir;
      this.objData.key = res.data.dir +'/'+ file.name;
    },
    handleUploadSuccess(response, file) {
      // this.fileList.pop();
      this.fileList.push({
        name: file.name,
        url: this.objData.host  +"/"+ this.objData.dir + "/" + file.name,
      });
      this.emitInput(this.fileList);
    },
  },
};
</script>
<style lang="less" scoped></style>
